import React from 'react';
import ReactEcharts from '@/components/Echarts';

const QualityBar = ({ data = [] }) => {
    const finalxAxisData = data.map(item => item.name);
    const finalData = data.map(item => ({
        value: item.num
    }));

    return (
        <ReactEcharts
            style={{ height: '200px', width: '100%' }}
            option={{
                color: ['#ffa22d'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: finalxAxisData,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(0, 0, 0, 0.1)'
                            }
                        },
                        axisLabel: {
                            color: 'rgba(0, 0, 0, 0.45)'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLine: { show: false },
                        axisTick: { show: false }
                    }
                ],
                series: [
                    {
                        name: '人数',
                        type: 'bar',
                        barWidth: '32px',
                        data: finalData
                    }
                ]
            }}
        />
    );
};

export default QualityBar;
